<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>


	<script type="text/javascript">

		$(function(){

			$(".time").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "bottom-left"
			});

			//为创建按钮绑定事件，打开添加操作的模态窗口
			$("#addBtn").click(function () {




				//走后台，目的是为了取得用户信息列表，为所有者下拉框铺值
				$.ajax({

					url : "workbench/activity/getUserList.do",
					type : "get",
					dataType : "json",
					success : function (data) {

						var html = "<option></option>";

						//遍历出来的每一个n，就是每一个user对象
						$.each(data,function (i,n) {

							html += "<option value='"+n.id+"'>"+n.name+"</option>";

						})

						$("#create-owner").html(html);


						//将当前登录的用户，设置为下拉框默认的选项
						/*

                            <select id="create-owner">
                                <option value="40f6cdea0bd34aceb77492a1656d9fb3">张三</option>
                                <option value="06f5fc056eac41558a964f96daa7f27c">李四</option>
                            </select>

                            $("#create-owner").val("40f6cdea0bd34aceb77492a1656d9fb3");


                         */

						//取得当前登录用户的id
						//在js中使用el表达式，el表达式一定要套用在字符串中
						var id = "${user.id}";

						$("#create-owner").val(id);
						//所有者下拉框处理完毕后，展现模态窗口
						$("#createActivityModal").modal("show");

					}

				})


			})

			$("#clearBtn").click(function () {

				$("#activityAddForm")[0].reset();

			})

			$("#closeBtn").click(function () {

				//$("#activityAddForm")[0].reset();
				//关闭添加操作的模态窗口
				$("#createActivityModal").modal("hide");

				$("#ownerMsg").html("");
				$("#nameMsg").html("");

			})

			//为保存按钮绑定事件，执行添加操作
			$("#saveBtn").click(function () {

				var owner = $.trim($("#create-owner").val());
				var name = $.trim($("#create-name").val());

				if(owner==""&&name!=""){
					$("#nameMsg").html("");
					$("#ownerMsg").html("必填");
					return false;
				}else if(owner!=""&&name==""){
					$("#ownerMsg").html("");
					$("#nameMsg").html("必填");
					return false;
				}else if(owner==""&&name==""){
					$("#ownerMsg").html("必填");
					$("#nameMsg").html("必填");
					return false;
				}


				$.ajax({

					url : "workbench/activity/save.do",
					data : {

						"owner" : owner,
						"name" : name,
						"startDate" : $.trim($("#create-startDate").val()),
						"endDate" : $.trim($("#create-endDate").val()),
						"cost" : $.trim($("#create-cost").val()),
						"description" : $.trim($("#create-description").val())

					},
					type : "post",
					dataType : "json",
					success : function (data) {

						if(data.success){



							//做完添加操作后，应该回到第一页，维持每页展现的记录数

							pageList(1,$("#productPage").bs_pagination('getOption', 'rowsPerPage'));



							//清空添加操作模态窗口中的数据
							//提交表单
							//$("#activityAddForm").submit();

							/*

                                注意：
                                    我们拿到了form表单的jquery对象
                                    对于表单的jquery对象，提供了submit()方法让我们提交表单
                                    但是表单的jquery对象，没有为我们提供reset()方法让我们重置表单（坑：idea为我们提示了有reset()方法）

                                    虽然jquery对象没有为我们提供reset方法，但是原生js为我们提供了reset方法
                                    所以我们要将jquery对象转换为原生dom对象

                                    jquery对象转换为dom对象：
                                        jquery对象[下标]

                                    dom对象转换为jquery对象：
                                        $(dom)


                             */
							/*jquery对象转换为dom对象：
                                jquery对象[下标]    */
							$("#activityAddForm")[0].reset();

							//关闭添加操作的模态窗口
							$("#createActivityModal").modal("hide");



						}else{

							alert("添加市场活动失败");

						}




					}

				})

			})



			//页面加载完毕后触发一个方法
			pageList(1,10);

			//为查询按钮绑定事件，触发pageList方法
			$("#searchBtn").click(function () {

				/*

                    点击查询按钮的时候，我们应该将搜索框中的信息保存起来,保存到隐藏域中


                 */

				$("#hidden-name").val($.trim($("#search-name").val()));
				$("#hidden-owner").val($.trim($("#search-owner").val()));
				$("#hidden-startDate").val($.trim($("#search-startDate").val()));
				$("#hidden-endDate").val($.trim($("#search-endDate").val()));

				pageList(1,10);

			})


			//为全选的复选框绑定事件，触发全选操作
			$("#qx").click(function () {

				$("input[name=xz]").prop("checked",this.checked);

			})

			$("#productBody").on("click",$("input[name=xz]"),function () {

				$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);

			})

			//为删除按钮绑定事件，执行市场活动删除操作
			$("#deleteBtn").click(function () {

				//找到复选框中所有挑√的复选框的jquery对象
				var $xz = $("input[name=xz]:checked");

				if($xz.length==0){

					alert("请选择需要删除的记录");

					//肯定选了，而且有可能是1条，有可能是多条
				}else{


					if(confirm("确定删除所选中的记录吗？")){

						//url:workbench/activity/delete.do?id=xxx&id=xxx&id=xxx

						//拼接参数
						var param = "";

						//将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
						for(var i=0;i<$xz.length;i++){

							param += "id="+$($xz[i]).val();

							//如果不是最后一个元素，需要在后面追加一个&符
							if(i<$xz.length-1){

								param += "&";

							}

						}

						//alert(param);
						$.ajax({

							url : "workbench/activity/delete.do",
							data : param,
							type : "post",
							dataType : "json",
							success : function (data) {

								/*

                                    data
                                        {"success":true/false}

                                 */
								if(data.success){

									//删除成功后
									//回到第一页，维持每页展现的记录数
									pageList(1,$("#productPage").bs_pagination('getOption', 'rowsPerPage'));


								}else{

									alert("删除市场活动失败");

								}


							}

						})


					}




				}


			})


			//为修改按钮绑定事件，打开修改操作的模态窗口
			$("#editBtn").click(function () {

				var $xz = $("input[name=xz]:checked");

				if($xz.length==0){

					alert("请选择需要修改的记录");

				}else if($xz.length>1){

					alert("只能选择一条记录进行修改");

					//肯定只选了一条
				}else{

					var id = $xz.val();

					$.ajax({

						url : "workbench/activity/getUserListAndActivity.do",
						data : {

							"id" : id

						},
						type : "get",
						dataType : "json",
						success : function (data) {

							/*

                                data
                                    用户列表
                                    市场活动对象

                                    {"uList":[{用户1},{2},{3}],"a":{市场活动}}

                             */

							//处理所有者下拉框
							var html = "<option></option>";

							$.each(data.uList,function (i,n) {

								html += "<option value='"+n.id+"'>"+n.name+"</option>";

							})

							$("#edit-owner").html(html);


							//处理单条activity
							$("#edit-id").val(data.a.id);
							$("#edit-name").val(data.a.name);
							$("#edit-owner").val(data.a.owner);
							$("#edit-startDate").val(data.a.startDate);
							$("#edit-endDate").val(data.a.endDate);
							$("#edit-cost").val(data.a.cost);
							$("#edit-description").val(data.a.description);

							//所有的值都填写好之后，打开修改操作的模态窗口
							$("#editActivityModal").modal("show");

						}

					})

				}

			})

			/*

                在实际项目开发中，一定是按照先做添加，再做修改的这种顺序
                所以，为了节省开发时间，修改操作一般都是copy添加操作

             */
			$("#updateBtn").click(function () {

				$.ajax({

					url : "workbench/activity/update.do",
					data : {

						"id" : $.trim($("#edit-id").val()),
						"owner" : $.trim($("#edit-owner").val()),
						"name" : $.trim($("#edit-name").val()),
						"startDate" : $.trim($("#edit-startDate").val()),
						"endDate" : $.trim($("#edit-endDate").val()),
						"cost" : $.trim($("#edit-cost").val()),
						"description" : $.trim($("#edit-description").val())

					},
					type : "post",
					dataType : "json",
					success : function (data) {

						/*

                            data
                                {"success":true/false}

                         */
						if(data.success){

							//修改成功后
							//刷新市场活动信息列表（局部刷新）
							//pageList(1,2);
							/*

                                修改操作后，应该维持在当前页，维持每页展现的记录数

                             */
							pageList($("#productPage").bs_pagination('getOption', 'currentPage')
									,$("#productPage").bs_pagination('getOption', 'rowsPerPage'));


							//关闭修改操作的模态窗口
							$("#editActivityModal").modal("hide");



						}else{

							alert("修改市场活动失败");

						}




					}

				})

			})


		});


		function pageList(pageNo,pageSize) {

			//将全选的复选框的√干掉
			$("#qx").prop("checked",false);

			//查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
			$("#search-name").val($.trim($("#hidden-name").val()));
			$("#search-owner").val($.trim($("#hidden-owner").val()));
			$("#search-startDate").val($.trim($("#hidden-startDate").val()));
			$("#search-endDate").val($.trim($("#hidden-endDate").val()));

			$.ajax({

				url : "workbench/activity/pageList.do",
				data : {

					"pageNo" : pageNo,
					"pageSize" : pageSize,
					"name" : $.trim($("#search-name").val()),
					"owner" : $.trim($("#search-owner").val()),
					"startDate" : $.trim($("#search-startDate").val()),
					"endDate" : $.trim($("#search-endDate").val())

				},
				type : "get",
				dataType : "json",
				success : function (data) {

					var html = "";

					//每一个n就是每一个市场活动对象
					$.each(data.dataList,function (i,n) {

						html += '<tr class="active">';
						html += '<td><input type="checkbox" name="xz" value="'+n.id+'"/></td>';
						html += '<td>'+n.name+'</td>';
						html += '<td>'+n.unit+'</td>';
						html += '<td>'+n.cost+'</td>';
						html += '<td>'+n.price+'</td>';
						html += '<td>'+n.specification+'</td>';
						html += '<td>'+n.category+'</td>';
						html += '<td>'+n.introduce+'</td>';
						html += '<td>'+n.createTime+'</td>';
						html += '<td>'+n.editTime+'</td>';
						html += '</tr>';

					})

					$("#productBody").html(html);

					//计算总页数
					var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;

					//数据处理完毕后，结合分页查询，对前端展现分页信息
					$("#productPage").bs_pagination({
						currentPage: pageNo, // 页码
						rowsPerPage: pageSize, // 每页显示的记录条数
						maxRowsPerPage: 20, // 每页最多显示的记录条数
						totalPages: totalPages, // 总页数
						totalRows: data.total, // 总记录条数

						visiblePageLinks: 3, // 显示几个卡片

						showGoToPage: true,
						showRowsPerPage: true,
						showRowsInfo: true,
						showRowsDefaultInfo: true,

						//该回调函数时在，点击分页组件的时候触发的
						onChangePage : function(event, data){
							pageList(data.currentPage , data.rowsPerPage);
						}
					});


				}

			})

		}

	</script>
</head>
<body>


	<input type="hidden" id="hidden-name"/>
	<input type="hidden" id="hidden-unit"/>
	<input type="hidden" id="hidden-specification"/>

	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>电脑产品列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">

			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">产品名称</div>
							<input class="form-control" type="text" id="search-name">
						</div>
					</div>

					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">销售单位</div>
							<input class="form-control" type="text" id="search-unit">
						</div>
					</div>


					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">规格</div>
							<input class="form-control time" type="text" id="search-specification" />
						</div>
					</div>

					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">产品分类</div>
							<input class="form-control time" type="text" id="search-category" />
						</div>
					</div>

					<button type="button" id="searchBtn" class="btn btn-default">查询</button>

				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
					<button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
					<button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
					<button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx"/></td>
							<td>产品名称</td>
							<td>销售单位</td>
							<td>成本</td>
							<td>标准价格</td>
							<td>规格</td>
							<td>产品分类</td>
							<td>产品介绍</td>
							<td>创建日期</td>
							<td>更新于</td>
						</tr>
					</thead>
					<tbody id="productBody">

					</tbody>

				</table>
			</div>

			<div style="height: 50px; position: relative;top: 30px;">

				<div id="productPage"></div>

			</div>
		</div>

	</div>
</body>
</html>